<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生家庭信息收集系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .card-shadow {
                @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
            }
            .btn-effect {
                @apply transform hover:-translate-y-0.5 transition-transform duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-10 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">学生家庭信息收集系统</h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <button id="form-tab" class="nav-tab active py-2 border-b-2 border-primary font-medium text-primary">
                    <i class="fa fa-pencil mr-1"></i>信息填写
                </button>
                <button id="data-tab" class="nav-tab py-2 border-b-2 border-transparent font-medium text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-table mr-1"></i>数据管理
                </button>
                <button id="stats-tab" class="nav-tab py-2 border-b-2 border-transparent font-medium text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bar-chart mr-1"></i>统计分析
                </button>
            </div>
            
            <div class="md:hidden">
                <button id="mobile-menu-button" class="text-gray-600 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <button id="mobile-form-tab" class="py-2 text-left font-medium text-primary">
                    <i class="fa fa-pencil mr-2"></i>信息填写
                </button>
                <button id="mobile-data-tab" class="py-2 text-left font-medium text-gray-600">
                    <i class="fa fa-table mr-2"></i>数据管理
                </button>
                <button id="mobile-stats-tab" class="py-2 text-left font-medium text-gray-600">
                    <i class="fa fa-bar-chart mr-2"></i>统计分析
                </button>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 表单页面 -->
        <section id="form-section" class="tab-content active">
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h2 class="text-2xl font-bold mb-6 text-center text-gray-800 border-b pb-3">学生家庭信息登记表</h2>
                
                <form id="student-form" class="space-y-6">
                    <!-- 学生基本信息 -->
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4 text-primary flex items-center">
                            <i class="fa fa-user-circle mr-2"></i>学生基本信息
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名 <span class="text-danger">*</span></label>
                                <input type="text" id="name" name="name" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="police-station" class="block text-sm font-medium text-gray-700 mb-1">所属派出所</label>
                                <input type="text" id="police-station" name="police-station"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="household-type" class="block text-sm font-medium text-gray-700 mb-1">户口性质</label>
                                <select id="household-type" name="household-type"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                                    <option value="">请选择</option>
                                    <option value="农业户口">农业户口</option>
                                    <option value="非农业户口">非农业户口</option>
                                    <option value="居民户口">居民户口</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="residence-type" class="block text-sm font-medium text-gray-700 mb-1">学生居住地类型</label>
                                <select id="residence-type" name="residence-type"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                                    <option value="">请选择</option>
                                    <option value="自有住房">自有住房</option>
                                    <option value="租赁住房">租赁住房</option>
                                    <option value="学校宿舍">学校宿舍</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="ethnicity" class="block text-sm font-medium text-gray-700 mb-1">民族</label>
                                <input type="text" id="ethnicity" name="ethnicity" placeholder="如：汉族"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="political-status" class="block text-sm font-medium text-gray-700 mb-1">政治面貌</label>
                                <select id="political-status" name="political-status"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                                    <option value="">请选择</option>
                                    <option value="群众">群众</option>
                                    <option value="共青团员">共青团员</option>
                                    <option value="中共党员">中共党员</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="health-condition" class="block text-sm font-medium text-gray-700 mb-1">健康状况</label>
                                <select id="health-condition" name="health-condition"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                                    <option value="">请选择</option>
                                    <option value="健康">健康</option>
                                    <option value="良好">良好</option>
                                    <option value="一般">一般</option>
                                    <option value="较差">较差</option>
                                    <option value="有慢性病">有慢性病</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="student-phone" class="block text-sm font-medium text-gray-700 mb-1">学生电话</label>
                                <input type="tel" id="student-phone" name="student-phone"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="is-card-holder" class="block text-sm font-medium text-gray-700 mb-1">是否是卡户</label>
                                <select id="is-card-holder" name="is-card-holder"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                                    <option value="">请选择</option>
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 家庭成员1信息 -->
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4 text-primary flex items-center">
                            <i class="fa fa-users mr-2"></i>家庭成员1信息
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                            <div>
                                <label for="member1-name" class="block text-sm font-medium text-gray-700 mb-1">成员1姓名</label>
                                <input type="text" id="member1-name" name="member1-name"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member1-relation" class="block text-sm font-medium text-gray-700 mb-1">成员1关系</label>
                                <input type="text" id="member1-relation" name="member1-relation" placeholder="如：父亲、母亲"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member1-id" class="block text-sm font-medium text-gray-700 mb-1">成员1身份证号码</label>
                                <input type="text" id="member1-id" name="member1-id"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member1-ethnicity" class="block text-sm font-medium text-gray-700 mb-1">成员1民族</label>
                                <input type="text" id="member1-ethnicity" name="member1-ethnicity"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member1-health" class="block text-sm font-medium text-gray-700 mb-1">成员1健康状况</label>
                                <select id="member1-health" name="member1-health"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                                    <option value="">请选择</option>
                                    <option value="健康">健康</option>
                                    <option value="良好">良好</option>
                                    <option value="一般">一般</option>
                                    <option value="较差">较差</option>
                                    <option value="有慢性病">有慢性病</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="member1-workplace" class="block text-sm font-medium text-gray-700 mb-1">成员1工作单位</label>
                                <input type="text" id="member1-workplace" name="member1-workplace"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member1-phone" class="block text-sm font-medium text-gray-700 mb-1">成员1电话</label>
                                <input type="tel" id="member1-phone" name="member1-phone"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                        </div>
                    </div>
                    
                    <!-- 家庭成员2信息 -->
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4 text-primary flex items-center">
                            <i class="fa fa-users mr-2"></i>家庭成员2信息
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                            <div>
                                <label for="member2-name" class="block text-sm font-medium text-gray-700 mb-1">成员2姓名</label>
                                <input type="text" id="member2-name" name="member2-name"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member2-relation" class="block text-sm font-medium text-gray-700 mb-1">成员2关系</label>
                                <input type="text" id="member2-relation" name="member2-relation" placeholder="如：父亲、母亲"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member2-id" class="block text-sm font-medium text-gray-700 mb-1">成员2身份证号码</label>
                                <input type="text" id="member2-id" name="member2-id"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member2-ethnicity" class="block text-sm font-medium text-gray-700 mb-1">成员2民族</label>
                                <input type="text" id="member2-ethnicity" name="member2-ethnicity"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member2-health" class="block text-sm font-medium text-gray-700 mb-1">成员2健康状况</label>
                                <select id="member2-health" name="member2-health"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                                    <option value="">请选择</option>
                                    <option value="健康">健康</option>
                                    <option value="良好">良好</option>
                                    <option value="一般">一般</option>
                                    <option value="较差">较差</option>
                                    <option value="有慢性病">有慢性病</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="member2-workplace" class="block text-sm font-medium text-gray-700 mb-1">成员2工作单位</label>
                                <input type="text" id="member2-workplace" name="member2-workplace"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="member2-phone" class="block text-sm font-medium text-gray-700 mb-1">成员2电话</label>
                                <input type="tel" id="member2-phone" name="member2-phone"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                        </div>
                    </div>
                    
                    <!-- 其他信息 -->
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4 text-primary flex items-center">
                            <i class="fa fa-info-circle mr-2"></i>其他信息
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                            <div>
                                <label for="graduation-school" class="block text-sm font-medium text-gray-700 mb-1">毕业学校</label>
                                <input type="text" id="graduation-school" name="graduation-school"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="class" class="block text-sm font-medium text-gray-700 mb-1">班级</label>
                                <input type="text" id="class" name="class"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="head-teacher" class="block text-sm font-medium text-gray-700 mb-1">班主任</label>
                                <input type="text" id="head-teacher" name="head-teacher"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div>
                                <label for="exam-score" class="block text-sm font-medium text-gray-700 mb-1">中考分数</label>
                                <input type="number" id="exam-score" name="exam-score" min="0" max="1000"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            </div>
                            
                            <div class="lg:col-span-3">
                                <label for="remarks" class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                                <textarea id="remarks" name="remarks" rows="3"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 提交按钮 -->
                    <div class="flex justify-center mt-8">
                        <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-medium px-8 py-3 rounded-lg shadow btn-effect flex items-center">
                            <i class="fa fa-check mr-2"></i>提交信息
                        </button>
                    </div>
                </form>
            </div>
        </section>
        
        <!-- 数据管理页面 -->
        <section id="data-section" class="tab-content hidden">
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">学生信息数据管理</h2>
                    
                    <div class="flex flex-wrap gap-3">
                        <div class="relative">
                            <input type="text" id="search-data" placeholder="搜索学生信息..."
                                class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg form-input-focus outline-none transition-all">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                        
                        <button id="export-excel" class="bg-success hover:bg-success/90 text-white font-medium px-5 py-2 rounded-lg shadow btn-effect flex items-center">
                            <i class="fa fa-download mr-2"></i>导出Excel
                        </button>
                        
                        <button id="clear-all-data" class="bg-danger hover:bg-danger/90 text-white font-medium px-5 py-2 rounded-lg shadow btn-effect flex items-center">
                            <i class="fa fa-trash mr-2"></i>清空数据
                        </button>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">毕业学校</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">中考分数</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生电话</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody id="students-table-body" class="bg-white divide-y divide-gray-200">
                            <!-- 数据将通过JavaScript动态填充 -->
                            <tr>
                                <td colspan="7" class="px-6 py-10 text-center text-gray-500">
                                    <i class="fa fa-folder-open-o text-4xl mb-3 block opacity-30"></i>
                                    暂无学生信息数据，请先在信息填写页面收集数据
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div id="pagination" class="mt-6 flex justify-between items-center hidden">
                    <div class="text-sm text-gray-600">
                        显示 <span id="showing-range">1-10</span> 条，共 <span id="total-count">0</span> 条
                    </div>
                    <div class="flex space-x-2">
                        <button id="prev-page" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fa fa-chevron-left"></i>
                        </button>
                        <div id="page-numbers" class="flex space-x-1">
                            <!-- 页码将通过JavaScript动态填充 -->
                        </div>
                        <button id="next-page" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 统计分析页面 -->
        <section id="stats-section" class="tab-content hidden">
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h2 class="text-2xl font-bold mb-6 text-gray-800">学生信息统计分析</h2>
                
                <div id="no-stats-data" class="py-16 text-center">
                    <i class="fa fa-bar-chart text-5xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500">暂无数据可供分析，请先收集学生信息</p>
                </div>
                
                <div id="stats-content" class="grid grid-cols-1 lg:grid-cols-2 gap-6 hidden">
                    <!-- 民族分布 -->
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4 text-primary">民族分布</h3>
                        <div class="h-80">
                            <canvas id="ethnicity-chart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 户口性质分布 -->
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4 text-primary">户口性质分布</h3>
                        <div class="h-80">
                            <canvas id="household-type-chart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 健康状况分布 -->
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4 text-primary">学生健康状况</h3>
                        <div class="h-80">
                            <canvas id="health-chart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 中考分数分布 -->
                    <div class="bg-gray-50 p-5 rounded-lg">
                        <h3 class="text-lg font-semibold mb-4 text-primary">中考分数分布</h3>
                        <div class="h-80">
                            <canvas id="score-chart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 查看详情模态框 -->
    <div id="detail-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold text-gray-800" id="detail-modal-title">学生信息详情</h3>
                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            
            <div class="p-6" id="detail-modal-content">
                <!-- 详情内容将通过JavaScript动态填充 -->
            </div>
            
            <div class="p-4 border-t flex justify-end">
                <button id="close-detail-modal" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium px-5 py-2 rounded-lg mr-2">
                    关闭
                </button>
                <button id="delete-record" class="bg-danger hover:bg-danger/90 text-white font-medium px-5 py-2 rounded-lg">
                    <i class="fa fa-trash mr-1"></i>删除
                </button>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="confirm-delete-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl max-w-md w-full">
            <div class="p-6 text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-danger/10 text-danger mb-4">
                    <i class="fa fa-exclamation-triangle text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">确认删除</h3>
                <p class="text-gray-600 mb-6">您确定要删除这条记录吗？此操作不可撤销。</p>
                
                <div class="flex justify-center space-x-3">
                    <button id="cancel-delete" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium px-5 py-2 rounded-lg">
                        取消
                    </button>
                    <button id="confirm-delete" class="bg-danger hover:bg-danger/90 text-white font-medium px-5 py-2 rounded-lg">
                        确认删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="fixed top-20 right-4 max-w-sm w-full bg-white shadow-lg rounded-lg p-4 transform transition-all duration-300 translate-x-full z-50 flex items-start">
        <div id="notification-icon" class="mr-3 text-xl mt-0.5">
            <i class="fa fa-check-circle text-success"></i>
        </div>
        <div class="flex-1">
            <h4 id="notification-title" class="font-medium text-gray-800"></h4>
            <p id="notification-message" class="text-sm text-gray-600 mt-1"></p>
        </div>
        <button id="close-notification" class="text-gray-400 hover:text-gray-600 ml-2">
            <i class="fa fa-times"></i>
        </button>
    </div>

    <script>
        // 全局变量
        let studentsData = JSON.parse(localStorage.getItem('studentsData')) || [];
        let currentPage = 1;
        const itemsPerPage = 10;
        let currentRecordId = null;
        
        // DOM 元素
        const formSection = document.getElementById('form-section');
        const dataSection = document.getElementById('data-section');
        const statsSection = document.getElementById('stats-section');
        const studentForm = document.getElementById('student-form');
        const studentsTableBody = document.getElementById('students-table-body');
        const pagination = document.getElementById('pagination');
        const prevPageBtn = document.getElementById('prev-page');
        const nextPageBtn = document.getElementById('next-page');
        const pageNumbersDiv = document.getElementById('page-numbers');
        const showingRangeSpan = document.getElementById('showing-range');
        const totalCountSpan = document.getElementById('total-count');
        const searchInput = document.getElementById('search-data');
        const exportExcelBtn = document.getElementById('export-excel');
        const clearAllDataBtn = document.getElementById('clear-all-data');
        const detailModal = document.getElementById('detail-modal');
        const closeModalBtn = document.getElementById('close-modal');
        const closeDetailModalBtn = document.getElementById('close-detail-modal');
        const detailModalTitle = document.getElementById('detail-modal-title');
        const detailModalContent = document.getElementById('detail-modal-content');
        const deleteRecordBtn = document.getElementById('delete-record');
        const confirmDeleteModal = document.getElementById('confirm-delete-modal');
        const cancelDeleteBtn = document.getElementById('cancel-delete');
        const confirmDeleteBtn = document.getElementById('confirm-delete');
        const notification = document.getElementById('notification');
        const notificationTitle = document.getElementById('notification-title');
        const notificationMessage = document.getElementById('notification-message');
        const closeNotificationBtn = document.getElementById('close-notification');
        const noStatsData = document.getElementById('no-stats-data');
        const statsContent = document.getElementById('stats-content');
        const navbar = document.getElementById('navbar');
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        // 导航标签
        const navTabs = document.querySelectorAll('.nav-tab');
        const formTab = document.getElementById('form-tab');
        const dataTab = document.getElementById('data-tab');
        const statsTab = document.getElementById('stats-tab');
        const mobileFormTab = document.getElementById('mobile-form-tab');
        const mobileDataTab = document.getElementById('mobile-data-tab');
        const mobileStatsTab = document.getElementById('mobile-stats-tab');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            renderStudentsTable();
            updatePagination();
            updateStats();
            
            // 监听滚动事件，改变导航栏样式
            window.addEventListener('scroll', () => {
                if (window.scrollY > 10) {
                    navbar.classList.add('py-2', 'shadow-lg');
                    navbar.classList.remove('py-3', 'shadow-md');
                } else {
                    navbar.classList.add('py-3', 'shadow-md');
                    navbar.classList.remove('py-2', 'shadow-lg');
                }
            });
            
            // 移动端菜单切换
            mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        });
        
        // 导航切换
        function switchTab(tabName) {
            // 隐藏所有内容
            formSection.classList.add('hidden');
            dataSection.classList.add('hidden');
            statsSection.classList.add('hidden');
            
            // 重置所有标签样式
            navTabs.forEach(tab => {
                tab.classList.remove('active', 'border-primary', 'text-primary');
                tab.classList.add('border-transparent', 'text-gray-600');
            });
            
            // 显示选中的内容和激活对应的标签
            if (tabName === 'form') {
                formSection.classList.remove('hidden');
                formTab.classList.add('active', 'border-primary', 'text-primary');
                formTab.classList.remove('border-transparent', 'text-gray-600');
                mobileFormTab.classList.add('text-primary');
                mobileFormTab.classList.remove('text-gray-600');
                mobileDataTab.classList.remove('text-primary');
                mobileDataTab.classList.add('text-gray-600');
                mobileStatsTab.classList.remove('text-primary');
                mobileStatsTab.classList.add('text-gray-600');
            } else if (tabName === 'data') {
                dataSection.classList.remove('hidden');
                dataTab.classList.add('active', 'border-primary', 'text-primary');
                dataTab.classList.remove('border-transparent', 'text-gray-600');
                mobileDataTab.classList.add('text-primary');
                mobileDataTab.classList.remove('text-gray-600');
                mobileFormTab.classList.remove('text-primary');
                mobileFormTab.classList.add('text-gray-600');
                mobileStatsTab.classList.remove('text-primary');
                mobileStatsTab.classList.add('text-gray-600');
                renderStudentsTable();
                updatePagination();
            } else if (tabName === 'stats') {
                statsSection.classList.remove('hidden');
                statsTab.classList.add('active', 'border-primary', 'text-primary');
                statsTab.classList.remove('border-transparent', 'text-gray-600');
                mobileStatsTab.classList.add('text-primary');
                mobileStatsTab.classList.remove('text-gray-600');
                mobileFormTab.classList.remove('text-primary');
                mobileFormTab.classList.add('text-gray-600');
                mobileDataTab.classList.remove('text-primary');
                mobileDataTab.classList.add('text-gray-600');
                updateStats();
            }
            
            // 关闭移动端菜单
            mobileMenu.classList.add('hidden');
        }
        
        // 导航事件监听
        formTab.addEventListener('click', () => switchTab('form'));
        dataTab.addEventListener('click', () => switchTab('data'));
        statsTab.addEventListener('click', () => switchTab('stats'));
        mobileFormTab.addEventListener('click', () => switchTab('form'));
        mobileDataTab.addEventListener('click', () => switchTab('data'));
        mobileStatsTab.addEventListener('click', () => switchTab('stats'));
        
        // 表单提交处理
        studentForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(studentForm);
            const student = {
                id: Date.now().toString(), // 使用时间戳作为唯一ID
                name: formData.get('name'),
                'police-station': formData.get('police-station'),
                'household-type': formData.get('household-type'),
                'residence-type': formData.get('residence-type'),
                ethnicity: formData.get('ethnicity'),
                'political-status': formData.get('political-status'),
                'health-condition': formData.get('health-condition'),
                'student-phone': formData.get('student-phone'),
                'is-card-holder': formData.get('is-card-holder'),
                'member1-name': formData.get('member1-name'),
                'member1-relation': formData.get('member1-relation'),
                'member1-id': formData.get('member1-id'),
                'member1-ethnicity': formData.get('member1-ethnicity'),
                'member1-health': formData.get('member1-health'),
                'member1-workplace': formData.get('member1-workplace'),
                'member1-phone': formData.get('member1-phone'),
                'member2-name': formData.get('member2-name'),
                'member2-relation': formData.get('member2-relation'),
                'member2-id': formData.get('member2-id'),
                'member2-ethnicity': formData.get('member2-ethnicity'),
                'member2-health': formData.get('member2-health'),
                'member2-workplace': formData.get('member2-workplace'),
                'member2-phone': formData.get('member2-phone'),
                'graduation-school': formData.get('graduation-school'),
                'class': formData.get('class'),
                'head-teacher': formData.get('head-teacher'),
                'exam-score': formData.get('exam-score'),
                remarks: formData.get('remarks'),
                submitTime: new Date().toLocaleString()
            };
            
            // 保存数据
            studentsData.push(student);
            localStorage.setItem('studentsData', JSON.stringify(studentsData));
            
            // 重置表单
            studentForm.reset();
            
            // 显示通知
            showNotification('提交成功', '学生信息已成功提交', 'success');
            
            // 更新表格和统计
            renderStudentsTable();
            updatePagination();
            updateStats();
        });
        
        // 渲染学生表格
        function renderStudentsTable() {
            const searchTerm = searchInput.value.toLowerCase().trim();
            
            // 过滤数据
            let filteredData = studentsData;
            if (searchTerm) {
                filteredData = studentsData.filter(student => 
                    student.name.toLowerCase().includes(searchTerm) ||
                    student['class'].toLowerCase().includes(searchTerm) ||
                    student['graduation-school'].toLowerCase().includes(searchTerm) ||
                    student['student-phone'].includes(searchTerm)
                );
            }
            
            // 分页处理
            const totalPages = Math.ceil(filteredData.length / itemsPerPage);
            currentPage = Math.min(currentPage, totalPages || 1);
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = Math.min(startIndex + itemsPerPage, filteredData.length);
            const paginatedData = filteredData.slice(startIndex, endIndex);
            
            // 更新表格内容
            if (studentsData.length === 0) {
                studentsTableBody.innerHTML = `
                    <tr>
                        <td colspan="7" class="px-6 py-10 text-center text-gray-500">
                            <i class="fa fa-folder-open-o text-4xl mb-3 block opacity-30"></i>
                            暂无学生信息数据，请先在信息填写页面收集数据
                        </td>
                    </tr>
                `;
                pagination.classList.add('hidden');
                return;
            }
            
            if (paginatedData.length === 0) {
                studentsTableBody.innerHTML = `
                    <tr>
                        <td colspan="7" class="px-6 py-10 text-center text-gray-500">
                            <i class="fa fa-search text-4xl mb-3 block opacity-30"></i>
                            没有找到匹配的学生信息
                        </td>
                    </tr>
                `;
                return;
            }
            
            pagination.classList.remove('hidden');
            studentsTableBody.innerHTML = '';
            
            paginatedData.forEach((student, index) => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition-colors';
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${startIndex + index + 1}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="font-medium text-gray-900">${student.name}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${student['class'] || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${student['graduation-school'] || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${student['exam-score'] || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${student['student-phone'] || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <button data-id="${student.id}" class="view-details text-primary hover:text-primary/80 mr-3">
                            <i class="fa fa-eye mr-1"></i>查看
                        </button>
                    </td>
                `;
                studentsTableBody.appendChild(row);
            });
            
            // 更新显示范围和总数
            showingRangeSpan.textContent = `${startIndex + 1}-${endIndex}`;
            totalCountSpan.textContent = filteredData.length;
            
            // 添加查看详情事件监听
            document.querySelectorAll('.view-details').forEach(button => {
                button.addEventListener('click', () => {
                    const id = button.getAttribute('data-id');
                    viewStudentDetails(id);
                });
            });
        }
        
        // 更新分页
        function updatePagination() {
            const searchTerm = searchInput.value.toLowerCase().trim();
            let filteredData = studentsData;
            
            if (searchTerm) {
                filteredData = studentsData.filter(student => 
                    student.name.toLowerCase().includes(searchTerm) ||
                    student['class'].toLowerCase().includes(searchTerm) ||
                    student['graduation-school'].toLowerCase().includes(searchTerm) ||
                    student['student-phone'].includes(searchTerm)
                );
            }
            
            const totalPages = Math.ceil(filteredData.length / itemsPerPage);
            
            // 清空页码
            pageNumbersDiv.innerHTML = '';
            
            // 添加页码
            for (let i = 1; i <= totalPages; i++) {
                const pageBtn = document.createElement('button');
                pageBtn.className = `px-3 py-1 rounded ${i === currentPage ? 'bg-primary text-white' : 'border border-gray-300 hover:bg-gray-50'}`;
                pageBtn.textContent = i;
                pageBtn.addEventListener('click', () => {
                    currentPage = i;
                    renderStudentsTable();
                    updatePagination();
                });
                pageNumbersDiv.appendChild(pageBtn);
            }
            
            // 更新上一页/下一页按钮状态
            prevPageBtn.disabled = currentPage === 1;
            nextPageBtn.disabled = currentPage === totalPages || totalPages === 0;
        }
        
        // 分页事件监听
        prevPageBtn.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                renderStudentsTable();
                updatePagination();
            }
        });
        
        nextPageBtn.addEventListener('click', () => {
            const searchTerm = searchInput.value.toLowerCase().trim();
            let filteredData = studentsData;
            
            if (searchTerm) {
                filteredData = studentsData.filter(student => 
                    student.name.toLowerCase().includes(searchTerm) ||
                    student['class'].toLowerCase().includes(searchTerm) ||
                    student['graduation-school'].toLowerCase().includes(searchTerm) ||
                    student['student-phone'].includes(searchTerm)
                );
            }
            
            const totalPages = Math.ceil(filteredData.length / itemsPerPage);
            
            if (currentPage < totalPages) {
                currentPage++;
                renderStudentsTable();
                updatePagination();
            }
        });
        
        // 搜索功能
        searchInput.addEventListener('input', () => {
            currentPage = 1; // 重置到第一页
            renderStudentsTable();
            updatePagination();
        });
        
        // 查看学生详情
        function viewStudentDetails(id) {
            const student = studentsData.find(s => s.id === id);
            if (!student) return;
            
            currentRecordId = id;
            detailModalTitle.textContent = `${student.name} 的信息详情`;
            
            // 构建详情内容
            let detailsHtml = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="text-base font-semibold text-gray-700 mb-3 border-b pb-2">学生基本信息</h4>
                        <ul class="space-y-2 text-sm">
                            <li><span class="text-gray-500">姓名：</span><span class="font-medium">${student.name}</span></li>
                            <li><span class="text-gray-500">所属派出所：</span>${student['police-station'] || '-'}</li>
                            <li><span class="text-gray-500">户口性质：</span>${student['household-type'] || '-'}</li>
                            <li><span class="text-gray-500">居住地类型：</span>${student['residence-type'] || '-'}</li>
                            <li><span class="text-gray-500">民族：</span>${student.ethnicity || '-'}</li>
                            <li><span class="text-gray-500">政治面貌：</span>${student['political-status'] || '-'}</li>
                            <li><span class="text-gray-500">健康状况：</span>${student['health-condition'] || '-'}</li>
                            <li><span class="text-gray-500">学生电话：</span>${student['student-phone'] || '-'}</li>
                            <li><span class="text-gray-500">是否是卡户：</span>${student['is-card-holder'] || '-'}</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="text-base font-semibold text-gray-700 mb-3 border-b pb-2">学校信息</h4>
                        <ul class="space-y-2 text-sm">
                            <li><span class="text-gray-500">毕业学校：</span>${student['graduation-school'] || '-'}</li>
                            <li><span class="text-gray-500">班级：</span>${student['class'] || '-'}</li>
                            <li><span class="text-gray-500">班主任：</span>${student['head-teacher'] || '-'}</li>
                            <li><span class="text-gray-500">中考分数：</span>${student['exam-score'] || '-'}</li>
                            <li><span class="text-gray-500">提交时间：</span>${student.submitTime}</li>
                        </ul>
                        
                        <h4 class="text-base font-semibold text-gray-700 mt-4 mb-3 border-b pb-2">备注</h4>
                        <p class="text-sm">${student.remarks || '无备注信息'}</p>
                    </div>
                </div>
                
                <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="text-base font-semibold text-gray-700 mb-3 border-b pb-2">家庭成员1信息</h4>
                        <ul class="space-y-2 text-sm">
                            <li><span class="text-gray-500">姓名：</span>${student['member1-name'] || '-'}</li>
                            <li><span class="text-gray-500">关系：</span>${student['member1-relation'] || '-'}</li>
                            <li><span class="text-gray-500">身份证号码：</span>${student['member1-id'] || '-'}</li>
                            <li><span class="text-gray-500">民族：</span>${student['member1-ethnicity'] || '-'}</li>
                            <li><span class="text-gray-500">健康状况：</span>${student['member1-health'] || '-'}</li>
                            <li><span class="text-gray-500">工作单位：</span>${student['member1-workplace'] || '-'}</li>
                            <li><span class="text-gray-500">电话：</span>${student['member1-phone'] || '-'}</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="text-base font-semibold text-gray-700 mb-3 border-b pb-2">家庭成员2信息</h4>
                        <ul class="space-y-2 text-sm">
                            <li><span class="text-gray-500">姓名：</span>${student['member2-name'] || '-'}</li>
                            <li><span class="text-gray-500">关系：</span>${student['member2-relation'] || '-'}</li>
                            <li><span class="text-gray-500">身份证号码：</span>${student['member2-id'] || '-'}</li>
                            <li><span class="text-gray-500">民族：</span>${student['member2-ethnicity'] || '-'}</li>
                            <li><span class="text-gray-500">健康状况：</span>${student['member2-health'] || '-'}</li>
                            <li><span class="text-gray-500">工作单位：</span>${student['member2-workplace'] || '-'}</li>
                            <li><span class="text-gray-500">电话：</span>${student['member2-phone'] || '-'}</li>
                        </ul>
                    </div>
                </div>
            `;
            
            detailModalContent.innerHTML = detailsHtml;
            detailModal.classList.remove('hidden');
        }
        
        // 关闭详情模态框
        function closeDetailModal() {
            detailModal.classList.add('hidden');
            currentRecordId = null;
        }
        
        closeModalBtn.addEventListener('click', closeDetailModal);
        closeDetailModalBtn.addEventListener('click', closeDetailModal);
        
        // 删除记录相关
        deleteRecordBtn.addEventListener('click', () => {
            if (currentRecordId) {
                detailModal.classList.add('hidden');
                confirmDeleteModal.classList.remove('hidden');
            }
        });
        
        cancelDeleteBtn.addEventListener('click', () => {
            confirmDeleteModal.classList.add('hidden');
            if (currentRecordId) {
                detailModal.classList.remove('hidden');
            }
        });
        
        confirmDeleteBtn.addEventListener('click', () => {
            if (currentRecordId) {
                // 从数据中删除记录
                studentsData = studentsData.filter(student => student.id !== currentRecordId);
                localStorage.setItem('studentsData', JSON.stringify(studentsData));
                
                // 更新表格和统计
                renderStudentsTable();
                updatePagination();
                updateStats();
                
                // 关闭模态框
                confirmDeleteModal.classList.add('hidden');
                currentRecordId = null;
                
                // 显示通知
                showNotification('删除成功', '学生信息已成功删除', 'success');
            }
        });
        
        // 清空所有数据
        clearAllDataBtn.addEventListener('click', () => {
            if (studentsData.length === 0) {
                showNotification('提示', '没有数据可清空', 'info');
                return;
            }
            
            if (confirm('确定要清空所有学生信息数据吗？此操作不可撤销！')) {
                studentsData = [];
                localStorage.setItem('studentsData', JSON.stringify(studentsData));
                
                // 更新表格和统计
                renderStudentsTable();
                updatePagination();
                updateStats();
                
                // 显示通知
                showNotification('清空成功', '所有学生信息已清空', 'success');
            }
        });
        
        // 导出Excel
        exportExcelBtn.addEventListener('click', () => {
            if (studentsData.length === 0) {
                showNotification('提示', '没有数据可导出', 'info');
                return;
            }
            
            // 准备导出数据（将对象数组转换为适合Excel的数组）
            const exportData = studentsData.map(student => {
                return {
                    '姓名': student.name,
                    '所属派出所': student['police-station'] || '',
                    '户口性质': student['household-type'] || '',
                    '学生居住地类型': student['residence-type'] || '',
                    '民族': student.ethnicity || '',
                    '政治面貌': student['political-status'] || '',
                    '健康状况': student['health-condition'] || '',
                    '学生电话': student['student-phone'] || '',
                    '是否是卡户': student['is-card-holder'] || '',
                    '成员1姓名': student['member1-name'] || '',
                    '成员1关系': student['member1-relation'] || '',
                    '成员1身份证号码': student['member1-id'] || '',
                    '成员1民族': student['member1-ethnicity'] || '',
                    '成员1健康状况': student['member1-health'] || '',
                    '成员1工作单位': student['member1-workplace'] || '',
                    '成员1电话': student['member1-phone'] || '',
                    '成员2姓名': student['member2-name'] || '',
                    '成员2关系': student['member2-relation'] || '',
                    '成员2身份证号码': student['member2-id'] || '',
                    '成员2民族': student['member2-ethnicity'] || '',
                    '成员2健康状况': student['member2-health'] || '',
                    '成员2工作单位': student['member2-workplace'] || '',
                    '成员2电话': student['member2-phone'] || '',
                    '毕业学校': student['graduation-school'] || '',
                    '班级': student['class'] || '',
                    '班主任': student['head-teacher'] || '',
                    '中考分数': student['exam-score'] || '',
                    '备注': student.remarks || '',
                    '提交时间': student.submitTime
                };
            });
            
            // 创建工作簿和工作表
            const worksheet = XLSX.utils.json_to_sheet(exportData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, '学生家庭信息');
            
            // 导出文件
            const fileName = `学生家庭信息_${new Date().toLocaleDateString().replace(/\//g, '-')}.xlsx`;
            XLSX.writeFile(workbook, fileName);
            
            // 显示通知
            showNotification('导出成功', `学生信息已导出为Excel文件: ${fileName}`, 'success');
        });
        
        // 显示通知
        function showNotification(title, message, type = 'info') {
            notificationTitle.textContent = title;
            notificationMessage.textContent = message;
            
            // 设置通知图标
            const iconElement = notificationIcon.querySelector('i');
            notificationIcon.innerHTML = '';
            
            if (type === 'success') {
                notificationIcon.innerHTML = '<i class="fa fa-check-circle text-success text-xl"></i>';
            } else if (type === 'error') {
                notificationIcon.innerHTML = '<i class="fa fa-exclamation-circle text-danger text-xl"></i>';
            } else if (type === 'warning') {
                notificationIcon.innerHTML = '<i class="fa fa-exclamation-triangle text-warning text-xl"></i>';
            } else {
                notificationIcon.innerHTML = '<i class="fa fa-info-circle text-primary text-xl"></i>';
            }
            
            // 显示通知
            notification.classList.remove('translate-x-full');
            
            // 3秒后自动关闭
            setTimeout(() => {
                notification.classList.add('translate-x-full');
            }, 3000);
        }
        
        // 关闭通知
        closeNotificationBtn.addEventListener('click', () => {
            notification.classList.add('translate-x-full');
        });
        
        // 更新统计图表
        function updateStats() {
            if (studentsData.length === 0) {
                noStatsData.classList.remove('hidden');
                statsContent.classList.add('hidden');
                return;
            }
            
            noStatsData.classList.add('hidden');
            statsContent.classList.remove('hidden');
            
            // 民族分布统计
            const ethnicityData = {};
            studentsData.forEach(student => {
                const ethnicity = student.ethnicity || '未知';
                ethnicityData[ethnicity] = (ethnicityData[ethnicity] || 0) + 1;
            });
            
            // 户口性质分布统计
            const householdTypeData = {};
            studentsData.forEach(student => {
                const type = student['household-type'] || '未填写';
                householdTypeData[type] = (householdTypeData[type] || 0) + 1;
            });
            
            // 健康状况分布统计
            const healthData = {};
            studentsData.forEach(student => {
                const health = student['health-condition'] || '未填写';
                healthData[health] = (healthData[health] || 0) + 1;
            });
            
            // 中考分数分布统计
            const scoreRanges = ['0-300', '301-400', '401-500', '501-600', '601-700', '701-800', '801-900', '901-1000', '未填写'];
            const scoreData = {};
            scoreRanges.forEach(range => scoreData[range] = 0);
            
            studentsData.forEach(student => {
                const score = parseInt(student['exam-score']);
                if (isNaN(score)) {
                    scoreData['未填写']++;
                } else if (score <= 300) {
                    scoreData['0-300']++;
                } else if (score <= 400) {
                    scoreData['301-400']++;
                } else if (score <= 500) {
                    scoreData['401-500']++;
                } else if (score <= 600) {
                    scoreData['501-600']++;
                } else if (score <= 700) {
                    scoreData['601-700']++;
                } else if (score <= 800) {
                    scoreData['701-800']++;
                } else if (score <= 900) {
                    scoreData['801-900']++;
                } else {
                    scoreData['901-1000']++;
                }
            });
            
            // 生成颜色
            function generateColors(count) {
                const colors = [];
                for (let i = 0; i < count; i++) {
                    const hue = (i * 360 / count) % 360;
                    colors.push(`hsla(${hue}, 70%, 60%, 0.7)`);
                }
                return colors;
            }
            
            // 创建民族分布图表
            const ethnicityCtx = document.getElementById('ethnicity-chart').getContext('2d');
            new Chart(ethnicityCtx, {
                type: 'pie',
                data: {
                    labels: Object.keys(ethnicityData),
                    datasets: [{
                        data: Object.values(ethnicityData),
                        backgroundColor: generateColors(Object.keys(ethnicityData).length),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
            
            // 创建户口性质分布图表
            const householdTypeCtx = document.getElementById('household-type-chart').getContext('2d');
            new Chart(householdTypeCtx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(householdTypeData),
                    datasets: [{
                        data: Object.values(householdTypeData),
                        backgroundColor: generateColors(Object.keys(householdTypeData).length),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
            
            // 创建健康状况分布图表
            const healthCtx = document.getElementById('health-chart').getContext('2d');
            new Chart(healthCtx, {
                type: 'bar',
                data: {
                    labels: Object.keys(healthData),
                    datasets: [{
                        label: '学生数量',
                        data: Object.values(healthData),
                        backgroundColor: 'rgba(22, 93, 255, 0.7)',
                        borderColor: 'rgba(22, 93, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
            
            // 创建中考分数分布图表
            const scoreCtx = document.getElementById('score-chart').getContext('2d');
            new Chart(scoreCtx, {
                type: 'bar',
                data: {
                    labels: Object.keys(scoreData),
                    datasets: [{
                        label: '学生数量',
                        data: Object.values(scoreData),
                        backgroundColor: 'rgba(0, 180, 42, 0.7)',
                        borderColor: 'rgba(0, 180, 42, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>
